<template>
  <div class="help-view">
    <div class="container">
      <h1 class="page-title">AI帮助</h1>
      
      <div class="help-content">
        <div class="ai-chat-section">
          <div class="chat-header">
            <h2>AI智能助手</h2>
            <p>有任何问题都可以问我</p>
          </div>
          
          <div class="chat-messages" ref="chatContainer">
            <div 
              v-for="(message, index) in chatMessages" 
              :key="index" 
              :class="['message', message.type]"
            >
              <div class="message-avatar">
                <i :class="message.type === 'user' ? 'fas fa-user' : 'fas fa-robot'"></i>
              </div>
              <div class="message-content">
                <p>{{ message.content }}</p>
              </div>
            </div>
          </div>
          
          <div class="chat-input">
            <input 
              v-model="userInput" 
              @keyup.enter="sendMessage"
              placeholder="输入您的问题..."
              type="text"
            />
            <button @click="sendMessage" :disabled="!userInput.trim()">
              <i class="fas fa-paper-plane"></i>
            </button>
          </div>
        </div>

        <div class="faq-section">
          <h2>常见问题</h2>
          <div class="faq-list">
            <div 
              v-for="(faq, index) in faqs" 
              :key="index"
              class="faq-item"
              @click="toggleFaq(index)"
            >
              <div class="faq-question">
                <h3>{{ faq.question }}</h3>
                <i :class="faq.isOpen ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
              </div>
              <div class="faq-answer" :class="{ 'open': faq.isOpen }">
                <p>{{ faq.answer }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'

interface ChatMessage {
  type: 'user' | 'ai'
  content: string
}

interface FAQ {
  question: string
  answer: string
  isOpen: boolean
}

const chatMessages = ref<ChatMessage[]>([
  {
    type: 'ai',
    content: '您好！我是AI助手，很高兴为您服务。请问有什么可以帮助您的吗？'
  }
])

const userInput = ref('')
const chatContainer = ref<HTMLElement>()

const faqs = ref<FAQ[]>([
  {
    question: '如何使用AI技术进行内容创作？',
    answer: '您可以选择内容创作场景，然后根据提示输入您的需求，AI会为您生成高质量的文章、脚本或创意内容。',
    isOpen: false
  },
  {
    question: 'AI图像处理支持哪些格式？',
    answer: '我们支持常见的图像格式，包括JPG、PNG、GIF、WebP等。建议使用高质量的原图以获得最佳效果。',
    isOpen: false
  },
  {
    question: '如何提高AI生成内容的质量？',
    answer: '提供详细、具体的描述和要求，使用清晰的关键词，并指定目标受众和风格偏好。',
    isOpen: false
  },
  {
    question: 'AI技术是否安全可靠？',
    answer: '我们采用先进的安全措施保护您的数据，所有AI生成的内容都经过质量检测，确保安全可靠。',
    isOpen: false
  },
  {
    question: '支持哪些语言？',
    answer: '目前支持中文和英文，未来将支持更多语言。您可以用中文或英文与AI助手交流。',
    isOpen: false
  }
])

const sendMessage = async () => {
  if (!userInput.value.trim()) return
  
  // 添加用户消息
  chatMessages.value.push({
    type: 'user',
    content: userInput.value
  })
  
  const userQuestion = userInput.value
  userInput.value = ''
  
  // 滚动到底部
  await nextTick()
  if (chatContainer.value) {
    chatContainer.value.scrollTop = chatContainer.value.scrollHeight
  }
  
  // 模拟AI回复
  setTimeout(() => {
    const aiResponse = generateAIResponse(userQuestion)
    chatMessages.value.push({
      type: 'ai',
      content: aiResponse
    })
    
    // 滚动到底部
    nextTick(() => {
      if (chatContainer.value) {
        chatContainer.value.scrollTop = chatContainer.value.scrollHeight
      }
    })
  }, 1000)
}

const generateAIResponse = (question: string): string => {
  const responses = [
    '这是一个很好的问题！让我为您详细解答...',
    '根据您的需求，我建议您可以尝试以下方法...',
    '这个问题涉及到AI技术的核心概念，我来为您解释一下...',
    '基于您的问题，我推荐使用以下工具和技巧...',
    '这是一个常见的问题，让我为您提供一些实用的建议...'
  ]
  
  return responses[Math.floor(Math.random() * responses.length)]
}

const toggleFaq = (index: number) => {
  faqs.value[index].isOpen = !faqs.value[index].isOpen
}
</script>

<style scoped>
.help-view {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.page-title {
  text-align: center;
  color: white;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 3rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.help-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.ai-chat-section {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.chat-header {
  text-align: center;
  margin-bottom: 2rem;
}

.chat-header h2 {
  color: #333;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.chat-header p {
  color: #666;
}

.chat-messages {
  height: 400px;
  overflow-y: auto;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 12px;
}

.message {
  display: flex;
  margin-bottom: 1rem;
  align-items: flex-start;
}

.message.user {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.5rem;
  flex-shrink: 0;
}

.message.user .message-avatar {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.message.ai .message-avatar {
  background: #e9ecef;
  color: #6c757d;
}

.message-content {
  background: white;
  padding: 1rem;
  border-radius: 12px;
  max-width: 70%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message.user .message-content {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.chat-input {
  display: flex;
  gap: 0.5rem;
}

.chat-input input {
  flex: 1;
  padding: 1rem;
  border: 2px solid #e9ecef;
  border-radius: 25px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.chat-input input:focus {
  border-color: #667eea;
}

.chat-input button {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.chat-input button:hover:not(:disabled) {
  transform: scale(1.05);
}

.chat-input button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.faq-section {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.faq-section h2 {
  color: #333;
  font-size: 1.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

.faq-item {
  border-bottom: 1px solid #e9ecef;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-item:hover {
  background: #f8f9fa;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.faq-question h3 {
  color: #333;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

.faq-question i {
  color: #667eea;
  transition: transform 0.3s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer.open {
  max-height: 200px;
}

.faq-answer p {
  color: #666;
  line-height: 1.6;
  padding: 0 0 1rem 0;
  margin: 0;
}

@media (max-width: 768px) {
  .help-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .chat-messages {
    height: 300px;
  }
  
  .message-content {
    max-width: 85%;
  }
}
</style> 